<template>
  <div id="app">

    <nav>
      <!--      <router-link to="/">Home</router-link> |-->
      <!--      <router-link to="/about">About</router-link>-->
      <el-container>

        <el-header>
          <div>
            餐厅管理系统
            <span id="user"> </span>
          </div>


        </el-header>

        <el-container>


          <el-aside width="150px" >
            <el-menu
                router
                :collapse='false'
                default-active="/"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
               @select="handleSelect">
              <el-menu-item index="/home">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>

              </el-menu-item>
              <el-menu-item index="/worke" >
                <i class="el-icon-user-solid"></i>
                <span slot="title">员工管理</span>
              </el-menu-item>
              <el-menu-item index="/salary" >
                <i class="el-icon-s-finance"></i>
                <span slot="title">工资管理</span>
              </el-menu-item>
              <el-menu-item index="/drink" >
                <i class="el-icon-milk-tea"></i>
                <span slot="title">饮品管理</span>
              </el-menu-item>
              <el-menu-item index="/setmeal" >
                <i class="el-icon-ice-tea"></i>
                <span slot="title">套餐管理</span>
              </el-menu-item>
              <el-menu-item index="/depot" >
                <i class="el-icon-s-home"></i>
                <span slot="title">进出库管理</span>
              </el-menu-item>
              <el-menu-item index="/guifan" >
                <i class="el-icon-message-solid"></i>
                <span slot="title">规范生产管理</span>
              </el-menu-item>
              <el-submenu index="/order">
                <template slot="title">
                  <i class="el-icon-s-shop"></i>
                  <span>订单</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/order-list">订单列表</el-menu-item>
                  <el-menu-item index="/order-back">退货列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-container>


            <el-main>
              <router-view/>
            </el-main>


            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </nav>
  </div>
</template>

<script>
export default {
  name: "first",
  data() {
    return {
      name: ''
    }
  },
  created() {
    this.getUsername()
  },
  methods: {
    handle(index) {
      console.log("index->",index);
    },
    getUsername() {
      this.$axios({
        method: 'get',
        url: 'user/getName'
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

*{
  padding:0;
  margin:0;
}

.el-menu{
  border-right: 0 !important;
}
.el-header, .el-footer {
  background-color: rgb(84,92,100);
  color: snow;
  text-align: center;
  line-height: 60px;

}

.el-aside {
  background-color: rgb(84,92,100);
  color: #333;
  text-align: left;
  height: 800px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;

}
span#user{
  margin-right:100px;
}

body > .el-container {
  margin-bottom: 40px;
}

</style>